<template>
	<view class="shopping">
		<!-- 导航 结构 start -->
		<view class="nav">
			<view class="nav-left">
				<u-icon name="arrow-left" color="#0c34ba" size="40"></u-icon>
				<text>返回</text>
			</view>
			<view class="nav-center common">
				购物袋
			</view>
			<view class="nav-right common">
				编辑
			</view>
		</view>
		<!-- 导航 结构 start -->
		<!-- 背景statr -->
		<view class="section-bg">
			<view class="img-box">
				<image src="../../static/images/shopbag_bg.png" mode="widthFix" class="img"></image>
			</view>
		</view>
		<!-- 背景statr -->
		<!-- 商品结构start -->
		<view class="section-product">
			<uni-swipe-action>
				<uni-swipe-action-item :right-options="options" @click="a">
					<view class="section-product-item">
						<view class="section-product-left">
							<view class="section-product-checkBox">
								<checkbox></checkbox>
							</view>
							<view class="left-box">
								<view class="img-box-left">
									<image src="../../static/images/home.png" mode="widthFix" class="img"></image>
								</view>
								<view class="right">
									<view class="right-name-box">
										<view class="name">
											咖啡
										</view>
										<view class="type">
											咖啡/kaf
										</view>
									</view>
									<view class="enname">
										coffee
									</view>
									<view class="price">
										$77.00
									</view>
								</view>
							</view>

						</view>
						<view class="section-product-right">
							<u-number-box v-model="value"></u-number-box>
						</view>

					</view>
				</uni-swipe-action-item>
			</uni-swipe-action>

		</view>
		<!-- 商品结构start -->
		<!-- 底部 结构 start --> //此部分实属装模做样 有待优化
		<view class="foot">
			<view class="foot-left">
				<checkbox></checkbox>
				<text class="left-text">全选</text>
			</view>
			<view class="foot-right">
				<text class="right-text">合计:</text>
				<view class="foot-price">
					<text class="one-price">$</text>
					<text class="two-price">88.00</text>

				</view>
				<button type="default" class="btn">提交订单</button>
			</view>
		</view>
		<!-- 底部 结构 start -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: 0,
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#007aff'

					}
				}]
			}
		},
		methods: {
			a(e, index) {
				console.log(e)
			}
		}
	}
</script>

<style lang="less" scoped>
	.shopping {
		height: 100vh;
		background-color: #f7f7f7;

		.nav {
			height: 100rpx;
			font-size: 34rpx;
			background-color: #fff;
			display: flex;
			align-items: center;

			.common {
				height: 70rpx;
				text-align: center;
				line-height: 70rpx;
			}

			.nav-left {
				height: 70rpx;
				color: #0c34ba;
				margin-left: 30rpx;
				display: flex;
				justify-items: center;
				align-items: center;
				flex: 1.5;
			}

			.nav-center {
				font-size: 38rpx;
				flex: 6.5;
			}

			.nav-right {
				flex: 2;
			}
		}

		.section-bg {
			.img-box {
				.img {
					width: 100%;
					display: block;
				}
			}
		}

		.section-product {
			margin: 30rpx;

			.section-product-item {
				position: relative;
				border-radius: 20rpx;
				padding: 10rpx 20rpx;
				background-color: #fff;
				overflow: hidden;
				display: flex;
				align-items: center;

				.section-product-left {
					display: flex;
					align-items: center;

					.section-product-checkBox {
						line-height: 200rpx;
					}

					.left-box {
						display: flex;

						.img-box-left {
							width: 170rpx;
							height: 170rpx;

							.img {
								width: 100%;
							}
						}

						.right {
							margin-left: 30rpx;

							.right-name-box {
								display: flex;

								.name {
									font-size: 36rpx;
								}

								.type {
									font-size: 28rpx;
									margin-left: 30rpx;
								}
							}

							.enname {
								font-size: 28rpx;
								padding-top: 10rpx;
								padding-bottom: 30rpx;
							}

							.price {
								color: #0c34ba;
								font-weight: bold;
							}
						}
					}
				}

				.section-product-right {
					position: absolute;
					bottom: 20rpx;
					right: 20rpx;

					::v-deep .u-icon-plus {
						width: 50rpx;

						color: #fff !important;
						border-radius: 50%;
						background-color: #0c34ba !important;
					}

					::v-deep .u-icon-minus {
						width: 50rpx;
						color: #b8c3eb !important;
						border-radius: 50%;
						border: 2rpx solid #b8c3eb;
						background-color: #fff !important;
					}

					::v-deep .uni-input-input {
						background-color: #fff !important;
					}
				}
			}
		}

		.foot {
			position: fixed;
			bottom: 120rpx;
			width: 100%;
			// border: 2rpx solid;
			padding: 0 30rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.foot-left {
				display: flex;
				align-items: center;

				.left-text {}
			}

			.foot-right {
				display: flex;
				align-items: center;

				.right-text {}

				.foot-price {
					margin: 0 30rpx;

					.one-price {}

					.two-price {
						font-size: 36rpx;
					}
				}

				.btn {
					width: 280rpx;
					height: 80rpx;
					color: #fff;
					font-size: 34rpx;
					border-radius: 80rpx;
					background-color: #0c34ba;
					line-height: 80rpx;
					text-align: center;
				}
			}
		}
	}
</style>